<template>
  <!-- 未登录的界面 -->
    <div class="bigbox" v-if="channel.setIsLogin == false">
      <div class="avatar">
        <img  class="tq1" src="https://img.ixintu.com/download/jpg/20200815/18ae766809ff27de6b7a942d7ea4111c_512_512.jpg!bg" alt="cw">
      </div>
      <van-button type="primary" class="login" @click="login">登录</van-button>
    </div>

  <!-- 已经登录的界面 -->
    <div class="bigbox" v-if="channel.setIsLogin == true">
      <span class="wz1">用户名：{{ channel.userdata[channel.loginid].name }}</span>
      <div class="avatar">
        <img  class="tq2"   :src="channel.userdata[channel.loginid].avatar" alt="cw">
      </div>
     
      <van-button type="danger" class="login" @click="loginout">退出</van-button>
      <div class="wz2">余&nbsp;&nbsp;&nbsp;&nbsp;额：{{ channel.userdata[channel.loginid].balance }}</div>
    </div>


    
    <div v-if="channel.setIsLogin===false">
      <van-button plain type="primary" class="but" @click="login">登录后查看数据</van-button>
    </div>
<!-- 这个是下拉框 登录后才有的-->
<div v-if="channel.setIsLogin===true">
  <van-collapse v-model="activeNames">
  <van-collapse-item title="用户名信息" name="1">
    {{ channel.userdata[channel.loginid].username }}
  </van-collapse-item>
  <van-collapse-item title="年龄信息" name="2">
    尊敬的用户,您的年龄是:{{ channel.userdata[channel.loginid].age }}岁
  </van-collapse-item>
  <van-collapse-item title="我的地址" name="3">
    {{ channel.userdata[channel.loginid].address }}
  </van-collapse-item>
  <van-collapse-item title="用户ID信息" name="4">
    您的贵族ID是:{{ channel.userdata[channel.loginid].id }}
  </van-collapse-item>
  <van-collapse-item title="我的订单" name="5">
     您暂时没有订单信息，快去下单吧
  </van-collapse-item>
  <van-collapse-item title="我的帮助" name="6">
     暂时没有帮助，敬请期待！
  </van-collapse-item>
</van-collapse>

</div>

        <!-- tabbar -->
        <van-tabbar v-model="active" style="z-index: 1;">
  <van-tabbar-item icon="home-o" :to="{path:'/'}">主页</van-tabbar-item>
  <van-tabbar-item icon="search" :to="{path:'/classify/classify1'}">分类</van-tabbar-item>
  <van-tabbar-item icon="browsing-history-o" :to="{path:'/life'}">数据</van-tabbar-item>
  <van-tabbar-item icon="comment-o" :to="{path:'/message'}">消息</van-tabbar-item>
  <van-tabbar-item icon="setting-o" :to="{path:'/car'}">购物车</van-tabbar-item>
  <van-tabbar-item icon="friends-o" :to="{path:'/mine'}">我的</van-tabbar-item>
</van-tabbar>
  </template>
  
  
  <script setup>
  import router from '@/router';
import { ref } from 'vue';
  import { useCounterStore } from '../../stores/counter'
  import { onMounted } from 'vue';
  import { showConfirmDialog } from 'vant';
  const channel = useCounterStore()
    
  // 折叠面板的用法
  const activeNames = ref(['0']);
  
  const active = ref(5)
    
    const login =() =>{
      router.push('/login')  
    }


    //退出登录
    const loginout =() =>{
    showConfirmDialog({
  title: '退出提醒',
  message:
    '确定要退出账号吗？',
})
  .then(() => {
    channel.setIsLogin = false
      channel.loginid = 100
      router.push('/mine')
  })
  .catch(() => {
    // on cancel
  });
}

onMounted(() => {
  window.scrollTo(0,0)
})
  </script>
  
  <style scoped>
  .bigbox{
    width: 99%;
    height: 200px;
    border: 1px solid rgb(206, 206, 206);
    background-color:#BEEDC7;
    border-radius: 10px;
    margin-top: 10px;
  }
  .login{
    margin-top: 40px;
    margin-left: 40px;
  }
  .avatar{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    border-radius: 50%;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    overflow: hidden
  }
  .tq1{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .tq2{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .wz1{
    margin-left: 10px;
  }
  .wz2{
    margin-left: 119px;
    margin-top: 1px;
    color: brown;
  }
  .but{
    width: 60%;
    height: 50px;
    margin-top: 106px;
    margin-left: 74px;
  }
  </style>
  